//
// Variables
// ==================================================


// Color system
// --------------------------------------------------
$whitesmoke   = #f5f5f5;
$gainsboro    = #eee;
$grey-lighter = #ddd;
$grey-light   = #ccc;
$grey         = #bbb;
$grey-dark    = #999;
$grey-dim     = #666;
$black-light  = #555;
$black-dim    = #333;
$black-deep   = #222;
$red          = #ff2a2a;
$blue-bright  = #87daff;
$blue         = #0684bd;
$blue-deep    = #262a30;
$orange       = #fc6423;


// Transition
// --------------------------------------------------
$transition-ease     = .2s ease-in-out;
$transition-ease-in  = .2s ease-in;
$transition-ease-out = .2s ease-out;


// Scaffolding
// Settings for some of the most global styles.
// --------------------------------------------------
// Global text color on <body>
$text-color                   = $black-light;
$text-color-dark              = $grey-light;

// Global link color.
$link-color                   = $black-light;
$link-color-dark              = $grey-light;
$link-hover-color             = $black-deep;
$link-hover-color-dark        = $gainsboro;
$link-decoration-color        = $grey-dark;

$blockquote-color             = $grey-dim;
$blockquote-color-dark        = $grey;

// Global border color.
$border-color                 = $grey-light;

// Background color for <body>
$body-bg-color                = white;
$body-bg-color-dark           = #282828;
$content-bg-color             = white;
$content-bg-color-dark        = $black-dim;

// Selection
$selection-bg                 = $blue-deep;
$selection-color              = $gainsboro;

// Dark mode color
$card-bg-color                = $whitesmoke;
$card-bg-color-dark           = $black-light;

$menu-item-bg-color           = $whitesmoke;
$menu-item-bg-color-dark      = $black-light;

$theme-color                  = convert(hexo-config('theme_color.light'));
$theme-color-dark             = convert(hexo-config('theme_color.dark'));

// Typography
// Font, line-height, and elements colors.
// --------------------------------------------------
get_font_family(config) {
  $custom-family = hexo-config('font.' + config + '.family');
  return $custom-family is a 'string' ? unquote($custom-family) : null;
}

// Font families.
$font-family-chinese      = 'PingFang SC', 'Microsoft YaHei';

$font-family-base         = $font-family-chinese, sans-serif;
$font-family-base         = get_font_family('global'), $font-family-chinese, sans-serif if get_font_family('global');

$font-family-logo         = $font-family-base;
$font-family-logo         = get_font_family('title'), $font-family-base if get_font_family('title');

$font-family-headings     = $font-family-base;
$font-family-headings     = get_font_family('headings'), $font-family-base if get_font_family('headings');

$font-family-posts        = $font-family-base;
$font-family-posts        = get_font_family('posts'), $font-family-base if get_font_family('posts');

$font-family-monospace    = consolas, Menlo, monospace, $font-family-chinese;
$font-family-monospace    = get_font_family('codes'), consolas, Menlo, monospace, $font-family-chinese if get_font_family('codes');


// Font size
$font-size-base           = (hexo-config('font.enable') and hexo-config('font.global.size') is a 'unit') ? unit(hexo-config('font.global.size'), em) : 1em;
$font-size-smallest       = .75em;
$font-size-smaller        = .8125em;
$font-size-small          = .875em;
$font-size-medium         = 1em;
$font-size-large          = 1.125em;
$font-size-larger         = 1.25em;
$font-size-largest        = 1.5em;


// Headings font size
$font-size-headings-step  = .125em;
$font-size-headings-base  = (hexo-config('font.enable') and hexo-config('font.headings.size') is a 'unit') ? unit(hexo-config('font.headings.size'), em) : 1.625em;


// Global line height
$line-height-base         = 2;
$line-height-code-block   = 1.6; // Can't be less than 1.3;


// Z-index master list
// --------------------------------------------------
// Fix issue https://github.com/next-theme/theme-next-docs/issues/54
$zindex-0       = 5;
$zindex-1       = 10;
$zindex-2       = 20;
$zindex-3       = 30;
$zindex-4       = 40;
$zindex-5       = 50;


// Table
// --------------------------------------------------
$table-border-color             = $grey-lighter;
$table-font-size                = $font-size-small;
$table-cell-border-bottom-color = $grey-lighter;
$table-row-odd-bg-color         = #f9f9f9;
$table-row-odd-bg-color-dark    = #282828;
$table-row-hover-bg-color       = $whitesmoke;
$table-row-hover-bg-color-dark  = #363636;


// Code & Code Blocks
// --------------------------------------------------
$code-font-family               = $font-family-monospace;

$highlight-background        = convert(hexo-config('highlight.light.background'));
$highlight-foreground        = convert(hexo-config('highlight.light.foreground'));
$highlight-gutter-background = mix($highlight-background, $highlight-foreground, 90%);
$highlight-gutter-foreground = mix($highlight-background, $highlight-foreground, 10%);

$highlight-background-dark        = convert(hexo-config('highlight.dark.background'));
$highlight-foreground-dark        = convert(hexo-config('highlight.dark.foreground'));
$highlight-gutter-background-dark = mix($highlight-background-dark, $highlight-foreground-dark, 90%);
$highlight-gutter-foreground-dark = mix($highlight-background-dark, $highlight-foreground-dark, 10%);


// Buttons
// --------------------------------------------------
$btn-default-radius                    = 0;
$btn-default-bg                        = $black-deep;
$btn-default-bg-dark                   = $black-deep;
$btn-default-color                     = white;
$btn-default-color-dark                = $text-color-dark;
$btn-default-border-color              = $black-deep;
$btn-default-border-color-dark         = $black-light;
$btn-default-hover-bg                  = white;
$btn-default-hover-bg-dark             = $grey-dim;
$btn-default-hover-color               = $black-deep;
$btn-default-hover-color-dark          = $text-color-dark;
$btn-default-hover-border-color        = $black-deep;
$btn-default-hover-border-color-dark   = $grey-dim;


// Pagination
// --------------------------------------------------
$pagination-border              = $gainsboro;

$pagination-link-bg             = transparent;
$pagination-link-color          = $link-color;
$pagination-link-border         = $gainsboro;

$pagination-link-hover-bg       = transparent;
$pagination-link-hover-color    = $link-color;
$pagination-link-hover-border   = var(--link-hover-color);

$pagination-active-bg           = $grey-light;
$pagination-active-color        = var(--content-bg-color);
$pagination-active-border       = $grey-light;


// Layout sizes
// --------------------------------------------------
$content-desktop                = 700px;
$content-desktop-large          = 800px;
$content-desktop-largest        = 900px;

$content-desktop-padding        = 40px;
$content-tablet-padding         = 10px;
$content-mobile-padding         = 8px;


// Headband
// --------------------------------------------------
$headband-height                = 3px;
$headband-bg                    = var(--theme-color);


// Section Header
// Variables for header section elements.
// --------------------------------------------------
$head-bg                        = transparent;

// Site Meta
$brand-color                    = white;
$brand-hover-color              = white;
$brand-color-dark               = $grey-lighter;
$brand-hover-color-dark         = $grey-lighter;

$font-size-title                = (hexo-config('font.enable') and hexo-config('font.title.size') is a 'unit') ? unit(hexo-config('font.title.size'), em) : 1.375em;
$font-size-subtitle             = $font-size-smaller;
$subtitle-color                 = $grey-dark;
$site-subtitle-color            = $grey-dark;


// Posts Collpase
// --------------------------------------------------
$posts-collapse-margin          = 35px;
$posts-collapse-margin-mobile   = 0;


// Tag Cloud
// --------------------------------------------------
$tag-cloud-start      = #aaa;
$tag-cloud-end        = #111;
$tag-cloud-start-dark = #555;
$tag-cloud-end-dark   = #eee;


// Sidebar
// Variables for sidebar section elements.
// --------------------------------------------------

$sidebar-padding                      = hexo-config('sidebar.padding') is a 'unit' ? unit(hexo-config('sidebar.padding'), px) : 18px;
$sidebar-offset                       = hexo-config('sidebar.offset') is a 'unit' ? unit(hexo-config('sidebar.offset'), px) : 12px;
$sidebar-nav-color                    = $grey-dim;
$sidebar-nav-hover-color              = $whitesmoke;
$sidebar-highlight                    = $blue-bright;

$site-author-image-width              = 96px;
$site-author-image-border-width       = 2px;
$site-author-image-border-color       = $black-dim;

$site-author-name-margin              = 5px 0 0;
$site-author-name-color               = $whitesmoke;
$site-author-name-weight              = normal;

$site-description-font-size           = $font-size-medium;
$site-description-color               = $grey-dark;
$site-description-margin-top          = 5px;

$site-state-item-count-font-size      = $font-size-larger;
$site-state-item-name-font-size       = $font-size-small;
$site-state-item-name-color           = inherit;


// Components
// --------------------------------------------------
// Back to top
$b2t-opacity                  = .8;
$b2t-opacity-hover            = 1;
$b2t-position-bottom          = -100px;
$b2t-position-bottom-on       = 19px;
$b2t-position-right           = 30px;
$b2t-position-right-mobile    = 20px;
$b2t-font-size                = 12px;
$b2t-color                    = white;
$b2t-bg-color                 = $black-deep;

//  .post-expand .post-eof
//  In Muse scheme, margin above and below the post separator
$post-eof-margin-top          = 80px; //  or 160px for more white space;
$post-eof-margin-bottom       = 60px; //  or 120px for less white space;

$post-card-margin             = 1em 0 0;


// Note colors
// --------------------------------------------------
// Read note light_bg_offset from NexT config and set in '$lbg%' to use it as string variable.
$lbg = hexo-config('note.light_bg_offset') is a 'unit' ? unit(hexo-config('note.light_bg_offset'), '%') : 0;
$note-types = 'default' 'primary' 'info' 'success' 'warning' 'danger';

$note-border-radius         = 3px;

$note-border = {
  default : #777,
  primary : #6f42c1,
  info    : #428bca,
  success : #5cb85c,
  warning : #f0ad4e,
  danger  : #d9534f
};

$note-bg = {
  default : lighten(spin($note-border.default, 0), 94% + $lbg),
  primary : lighten(spin($note-border.primary, 10), 92% + $lbg),
  info    : lighten(spin($note-border.info, -10), 91% + $lbg),
  success : lighten(spin($note-border.success, 10), 90% + $lbg),
  warning : lighten(spin($note-border.warning, 10), 88% + $lbg),
  danger  : lighten(spin($note-border.danger, -10), 92% + $lbg)
};

$note-text = {
  default : $note-border.default,
  primary : $note-border.primary,
  info    : $note-border.info,
  success : $note-border.success,
  warning : $note-border.warning,
  danger  : $note-border.danger
};

$note-icon = {
  default : '\f0a9',
  primary : '\f055',
  info    : '\f05a',
  success : '\f058',
  warning : '\f06a',
  danger  : '\f056'
};

$note-modern-border = {
  default : #e1e1e1,
  primary : #e1c2ff,
  info    : #b3e5ef,
  success : #d0e6be,
  warning : #fae4cd,
  danger  : #ebcdd2
};

$note-modern-bg = {
  default : lighten(spin($note-modern-border.default, 10), 60% + ($lbg * 4)),
  primary : lighten(spin($note-modern-border.primary, 10), 40% + ($lbg * 4)),
  info    : lighten(spin($note-modern-border.info, 10), 50% + ($lbg * 4)),
  success : lighten(spin($note-modern-border.success, 10), 40% + ($lbg * 4)),
  warning : lighten(spin($note-modern-border.warning, 10), 43% + ($lbg * 4)),
  danger  : lighten(spin($note-modern-border.danger, 10), 35% + ($lbg * 4))
};

$note-modern-text = {
  default : $grey-dim,
  primary : #6f42c1,
  info    : #31708f,
  success : #3c763d,
  warning : #8a6d3b,
  danger  : #a94442
};

$note-modern-hover = {
  default : darken(spin($note-modern-text.default, -10), 32%),
  primary : darken(spin($note-modern-text.primary, -10), 22%),
  info    : darken(spin($note-modern-text.info, -10), 32%),
  success : darken(spin($note-modern-text.success, -10), 27%),
  warning : darken(spin($note-modern-text.warning, -10), 18%),
  danger  : darken(spin($note-modern-text.danger, -10), 22%)
};


// Tabs border radius
// --------------------------------------------------
$tbr                        = 0;


// Label colors
// --------------------------------------------------
$label = {
  default : lighten(spin($note-border.default, 0), 89% + $lbg),
  primary : lighten(spin($note-border.primary, 10), 87% + $lbg),
  info    : lighten(spin($note-border.info, -10), 86% + $lbg),
  success : lighten(spin($note-border.success, 10), 85% + $lbg),
  warning : lighten(spin($note-border.warning, 10), 83% + $lbg),
  danger  : lighten(spin($note-border.danger, -10), 87% + $lbg)
};
